HTML5ビューワ（MVC）サンプル

すべて展開

すべて折りたたむ

本サンプルでは、ASP.NET MVCフレームワークでHTML5ビューワを使用する方法を紹介します。

メモ：サンプルを実行する前に、ASP.NET MVC5フレームワークがシステムにインストールされている必要があります。

フォルダ

<User Folder>\Samples\Professional\ActiveReportsWithMVC5WebAPI\C#

実行時の機能

サンプルを実行すると、左ペインに［顧客リスト］、右ペインに［顧客情報］および［レポート］の２つのタブが表示されます。このページには以下のオプションがあります。

［顧客リスト］
顧客名のリストを表示します。上部にある検索ボックスで顧客名を検索できます。
［顧客情報］ タブ
［顧客リスト］ でクリックした顧客名の詳細情報を表示します。
［レポート］ タブ
選択した顧客に関するレポートをHTML5ビューワに表示します。このタブに以下のオプションがあります。
- ［レポートの選択］: 注文書（ページレポート)、商品情報（セクションレポート）
  いずれかのボタンをクリックすると、選択したレポートを表示します。
- ［UIタイプの選択］: デスクトップ、モバイル
  既定では［デスクトップ］モードで表示します。［モバイル］ボタンをクリックすると、画面サイズの小さなモバイル端末に適したUIで表示します。

プロジェクトの詳細

App_Startフォルダ

このフォルダには、アプリケーションを起動するために必要な、以下のcsファイルが含まれます。

BundleConfig.cs
FilterConfig.cs
RouteConfig.cs
Startup.Auth.cs
WebApiConfig.cs

Contentフォルダ

Imageフォルダ

imagesフォルダには、ビューワで使用されるボタンの画像が含まれます。

また、このアプリケーションのスタイルを格納する、以下のcssファイルが含まれます。

bootstrap.css
bootstrap.min.css
SideBar.css
Site.css

Controllersフォルダ

このフォルダには、HomeControllerとCustomersControllerの２つのファイルが含まれます。HomeControllerファイルでは、ユーザ対話を処理して、メーンビューを返すコードが含まれます。CustomersControllerファイルでは、顧客を選択することで、顧客の詳細を返すコードが含まれます。

cssフォルダ

cssフォルダには、HTML5ビューワアプリケーションのスタイルを格納する、以下のcssファイルが含まれます。

GrapeCity.ActiveReports.Viewer.Html.css
theme-cosmo.css

fontsフォルダ

fontsフォルダには、実行時にHTML5ビューワに表示されるテキストのスタイルを提供する、以下のフォントファイルが含まれます。

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Modelsフォルダ

このフォルダには以下のクラスが含まれています。

Customer：Reels.mdbデータソースのCustomerテーブルについて情報を示すクラスです。

CustomerContext：Reels.mdbデータソースのCustomerOrdersテーブルについて情報を示すクラスです。

Reportsフォルダ

OrderDetailsレポート: このページレポートは、デスクトップのUIでOrdersレポートを選択したときにHTML5ビューワでロードされます。Tableデータ領域を使用してデータを表示します。また、合計を表示するためにSum関数を使用しています。

ProductDetailレポート: このセクションレポートは、デスクトップのUIでProduct Detailsレポートを選択したときにHTML5ビューワでロードされます。TextboxおよびLabelコントロールを使用してデータを表示します。また、各顧客の注文を表示するためにSum関数を使用しています。

Scriptsフォルダ

scriptsフォルダには、このアプリケーションをビルドするために必要な、以下のJavaScriptファイルとその依存関係が含まれます。

bootstrap-3.0.0.js
GrapeCity.ActiveReports.Viewer.Html.js
jquery-1.10.2.js
knockout-2.3.0.js

Viewsフォルダ

Homeフォルダ

このフォルダには、以下のビューが含まれています。

Index.cshtml：インデックスビューファイル。

Sharedフォルダ

_Layout.cshtml：デフォルトのレイアウトファイル。

ViewStart.cshtml

デフォルトのビュースタートファイル。

Web.config

HTTPハンドラの設定を追加しています。

ActiveReports.ReportService.asmxファイル

WebViewerコントロールを動作させるために必要なファイルです。Webフォーム上にWebViewerコントロールを配置すると、ActiveReports.ReportService.asmxファイルがプロジェクトに自動で追加されます。このサービスは、［新しい項目の追加］からも追加できます。

Global.asax

このWebアプリケーションのグローバルURLのルーティング値を設定するデフォルトのクラスです。

Startup.cs

デフォルトのスタートアップファイル。

Web.config

HTTPハンドラの設定を追加しています。

ActiveReportsのバージョンを更新する際に、ここでは手動でバージョン情報を更新する必要があります。